<script setup>
  import { ref, onMounted, onBeforeMount } from 'vue'
  import axios from 'axios'
  import { useRouter } from 'vue-router'
  import NavTop from '@/views/NavBar/NavTop.vue'
  
  // 定义响应式数据
  const noticeData_arr = ref([
    "每一颗星星都是遗失的梦，漂浮在无垠的夜空中",
    "在时间的洪流里，我们的痛苦只是一粒沙",
    "一朵花的凋零，预示着世界的一次深呼吸",
    "世界的每一寸，都是反射出的孤独的边界",
    "如果世界是一头大象那么抽象是否是对世界的一种反抗",
    "不是每个答案都有意义，有些问题本身才是答案",
    "看似平静的海面下，暗流早已翻涌",
    "我们都在寻找自己，却忘记了自己早已存在",
    "空旷的街道上，脚步声仿佛是时间的回音",
    "一瞬间的失落，可能是永恒的开始",
    "在无尽的黑夜里，存在的意义不过是等待",
    "每个人的眼睛里，都是未曾完成的宇宙",
    "一场雨落下之后，世界会重新定义自己的边界",
    "活在当下的本质是不断逃离过去的困扰",
    "灵魂的重量，无法用任何尺度来衡量",
    "每一条路的尽头，都会有新的迷茫",
    "当风停息时，我们是否也会停下脚步",
    "时间是一条不存在的河流，流过一切又回到起点",
    "我们终究无法掌控未来，但总会用力去定义它",
    "学而不思则罔，不思不学则爽",
    "妈野，人生他诓我",
    "我就这么活翘翘的死着",
    "你觉得对的事情你就去做觉得不对的事情就偷偷去做",
    "事情会做完的 世界会完蛋的"
  ])
  
  const content_arr = ref([])  // 用ref替代data中的content_arr
  const time = ref('')  // 用ref替代data中的time
  const date = ref('')  // 用ref替代data中的date
  const carousel_arr = ref([
    "https://pica.zhimg.com/v2-74f2f1d3fa5281f5dd22f54f70e6e5d8_1440w.jpg",
    "https://pic1.zhimg.com/v2-cfc35d591d7e9acf34a161baab91aca8_r.jpg",
    "https://pica.zhimg.com/v2-d421a1d6ac573e28a598986928c1c9de_1440w.jpg",
    "https://pic4.zhimg.com/v2-73457c0c8452f3909d01a2520776f687_1440w.jpg",
    "https://pic3.zhimg.com/v2-fece54634864b6cbcead4d613d4d14b0_1440w.jpg"
  ])
  const carouselIndex = ref(0)
  const carousel_timer = ref(null)
  const timer = ref(null)
  
  const router = useRouter()
  
  // 获取模拟数据
  async function getMockData() {
    try {
      const res = await axios.get('/api/cardContentData')
      content_arr.value = res.data.data
  
      // 固定前三个卡片的内容并添加固定标记
      content_arr.value[0] = {
        id: 1,
        title: "微信小程序毕业设计",
        content: "本篇文章详细介绍了微信小程序毕业设计的整体流程，包括项目选题、技术选型、开发过程、部署上线及常见问题解决方案。适合正在进行微信小程序开发的同学参考。",
        img: "https://example.com/fixed-image1.jpg",
        date: "2024-12-27",
        imgLoaded: false,
        fixed: true,
        slug: 'MusicProject'
      }
  
      content_arr.value[1] = {
        id: 2,
        title: "个人博客搭建注意事项",
        content: "在创建个人博客的过程中，我遇到了一些技术性难题，本文记录了这些问题以及我的解决方法。内容涵盖了项目环境安装、项目配置文件的部署过程中的常见问题，希望能够为有类似需求的开发者提供参考。",
        img: "https://example.com/fixed-image2.jpg",
        date: "2024-12-27",
        imgLoaded: false,
        fixed: true,
        slug: 'BlogProject_record'
      }
  
      content_arr.value[2] = {
        id: 3,
        title: "计算机网络技术实操",
        content: "本文讲解了计算机网络技术的实际应用，包括网络协议、路由交换技术、网络安全与防护等内容。通过具体的实操案例，帮助读者深入理解计算机网络技术的工作原理和实际应用。",
        img: "https://example.com/fixed-image3.jpg",
        date: "2024-12-27",
        imgLoaded: false,
        fixed: true,
        slug: 'NetWrok'
      }
  
      // 如果模拟数据少于3条，可以直接用这3条固定数据补充
      if (content_arr.value.length < 3) {
        content_arr.value = [
          content_arr.value[0],
          content_arr.value[1],
          content_arr.value[2]
        ]
      }
  
      // 获取随机图片
      await getRandomImg()
    } catch (err) {
      console.log(err)
    }
  }
  
  // 获取随机图片
  function getRandomImg() {
    axios.get('https://xin.xingvvhuang.cn/suijiimg.php?action=json&msg=10')
      .then(response => {
        content_arr.value.forEach((item, index) => {
          item.img = response.data.data[index].imgurl
          item.imgLoaded = false
        })
      })
      .catch(err => {
        console.log(err)
      })
  }
  
  // 实时时间更新
  function updateClock() {
    const now = new Date()
    let hours = now.getHours()
    let minutes = now.getMinutes()
    let seconds = now.getSeconds()
    const year = now.getFullYear()
    const month = now.getMonth() + 1
    const day = now.getDate()
    hours = hours < 10 ? '0' + hours : hours
    minutes = minutes < 10 ? '0' + minutes : minutes
    seconds = seconds < 10 ? '0' + seconds : seconds
  
    const formattedMonth = month < 10 ? '0' + month : month
    const formattedDay = day < 10 ? '0' + day : day
  
    time.value = `${hours}:${minutes}:${seconds}`
    date.value = `${year}-${formattedMonth}-${formattedDay}`
  }
  
  // 跳转到对应的文章
  function goEssay(item) {
    if (item.fixed) {
      router.push(`/Essay/${item.slug}`)
    } else {
      const slugs = ['NetWrok', 'BlogProject_record', 'MusicProject']
      const randomSlug = slugs[Math.floor(Math.random() * slugs.length)]
      router.push(`/Essay/${randomSlug}`)
    }
  }
  
  // 滚动到指定元素
  function scrollToElement() {
    this.$refs.targetSection.scrollIntoView({ behavior: 'smooth' })
  }
  
  // 刷新页面
  function refreshPage() {
    window.location.reload()
  }
  
  // 轮播图自动切换
  function autoPlay() {
    nextFun()
  }
  
  function nextFun() {
    carouselIndex.value++
    if (carouselIndex.value >= carousel_arr.value.length) {
      carouselIndex.value = 0
    }
  }
  
  function previousFun() {
    carouselIndex.value--
    if (carouselIndex.value < 0) {
      carouselIndex.value = carousel_arr.value.length - 1
    }
  }
  
  function dotsTo(index) {
    setTimeout(() => {
      carouselIndex.value = index
    }, 300)
  }
  
  // 生命周期钩子
  onMounted(() => {
    getMockData()
    updateClock()
    timer.value = setInterval(() => {
      updateClock()
    }, 1000)
  })
  
  onBeforeMount(() => {
    if (timer.value) {
      clearInterval(timer.value)
    }
    if (carousel_timer.value) {
      clearInterval(carousel_timer.value)
    }
  })
  
  const onImageLoad = (item)=> {
    // 图片加载完成后，隐藏默认图片并显示随机图片
    item.imgLoaded = true;
  }
</script>

<template>
  <div class="home-body">
    <NavTop />
    <div class="home-main">
    <div class="home-main-box">
      <div class="card-box">
        <!-- 轮播图 -->
        <div class="carousel-big-box" ref="targetSection">
          <div class="carousel-box">
            <img :src="carousel_arr[carouselIndex]" :alt="carouselIndex" >
            <div class="arrows-box">
              <div id="arrows-left" class="arrows-show" @click="previousFun()">
                <svg t="1731893372937" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9697" width="20" height="20"><path d="M452.64 78.016a48 48 0 0 0-64.224-3.296l-3.648 3.296L34.784 428a118.72 118.72 0 0 0-4.64 163.008l4.64 4.896 349.984 349.984a48 48 0 0 0 71.168-64.224l-3.296-3.648L102.656 528a22.72 22.72 0 0 1-2.4-29.28l2.4-2.816L452.64 145.888a48 48 0 0 0 0-67.872z" fill="#CCCCCC" p-id="9698"></path></svg>
              </div>
              <div id="arrows-right" class="arrows-show" @click="nextFun()">
                <svg t="1731893385498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9843" width="20" height="20"><path d="M571.04 78.016a48 48 0 0 1 64.224-3.296l3.648 3.296 349.984 349.984a118.72 118.72 0 0 1 4.64 163.008l-4.64 4.896-349.984 349.984a48 48 0 0 1-71.168-64.224l3.296-3.648L921.024 528a22.72 22.72 0 0 0 2.4-29.28l-2.4-2.816L571.04 145.888a48 48 0 0 1 0-67.872z" fill="#CCCCCC" p-id="9844"></path></svg>
              </div>
            </div>
            <div class="carousel-dot-box">
              <div v-for="(item,index) in carousel_arr" :key="index" @mouseleave="dotsTo(index)" @mouseenter="dotsTo(index)" :class="carouselIndex == index ? 'dots-index' : 'dots' "></div>
            </div>
          </div>
        </div>
        <!-- 文章卡片 -->
        <div v-for="item in content_arr" :key="item.id" class="home-card" @click="goEssay(item)">
          <div class="home-card-left-box" @click="getMockData()">
            <img
              v-if="!item.imgLoaded"
              :src="require('@/assets/img/02.jpg')"
              alt="placeHolder"
            >
            <img :src="item.img" alt="realUrl" @load="onImageLoad(item)" loading="lazy">
          </div>
          <div class="home-card-right-box">
            <!-- 标题盒子 -->
            <div class="card-text-title">
              <span :title="item.title">{{ item.title }}</span>
            </div>
            <!-- 内容盒子 -->
            <div class="card-right-text">
              <div class="text-span">
                {{ item.content }}
              </div>
            </div>
            <!-- 底部盒子 -->
            <div class="card-right-bottom-box">
              <div class="user-n">
                <svg t="1731487909130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4258" width="15" height="20"><path d="M211.2 723.2C153.6 640 160 492.8 345.6 307.2c25.6-19.2 51.2-44.8 76.8-64l147.2 140.8L569.6 160C780.8 51.2 1024 0 1024 0s-108.8 448-320 652.8c-160 153.6-300.8 179.2-390.4 147.2l-204.8 204.8c-25.6 25.6-64 25.6-89.6 0-25.6-25.6-25.6-64 0-89.6L211.2 723.2 211.2 723.2z" p-id="4259"></path></svg>
                XiaoYoe
              </div>
              <div class="time-n">
                <div class="icon" />
                <img
                  src="@/assets/img/time.svg"
                  alt=""
                  style="margin-right: 4px"
                >
                {{ item.date }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="side-bar-box">
        <div class="side-bar-sticky-box">
        <!-- 角色卡片 -->
        <div class="user-card">
          <div class="user-card-box">
            <!-- 头像 名字 个签盒子 -->
            <div class="user-card-small-box">
              <img
                src="https://wx3.sinaimg.cn/mw690/005LlktZly1hr9jdazs2ej30zk0zkx24.jpg"
                alt=""
              >
              <div class="name-box">
                『 小约 』
              </div>
              <div class="user-text">
                我会搞砸一切并坐在美丽的废墟上休息一天
              </div>
            </div>
            <!-- 其他标签盒子 -->
            <div class="social-tag">
              <div class="social-tag-follow-me" onclick="window.open('https://github.com/Xiaoyoe', '_blank')">
                  Follow Me
              </div>
            </div>
            <div class="social-tag">
              <div class="social-tag-box">
                <a href="https://music.163.com/#/user/home?id=532594681" target="_blank"><i class="icon-netease">
                  <svg t="1731459913800" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2546" width="200" height="200"><path d="M350.375 62h323.25C774.5 62 812 72.5 846.875 92A204.375 204.375 0 0 1 932 177.125c19.5 34.875 30 72.375 30 173.25v323.25c0 100.125-10.5 136.5-30 173.25A204.375 204.375 0 0 1 846.875 932c-37.5 19.5-73.125 30-173.25 30h-323.25C249.5 962 212 951.5 177.125 932A204.375 204.375 0 0 1 92 846.875C72.5 812 62 774.5 62 673.625v-323.25C62 249.5 72.5 212 92 177.125A204.375 204.375 0 0 1 177.125 92C212 72.5 249.5 62 350.375 62z" fill="#D81E06" p-id="2547"></path><path d="M645.125 177.875a156.75 156.75 0 0 1 58.875 28.5 43.875 43.875 0 0 1 15 18.375 37.5 37.5 0 0 1-3.375 34.875 37.5 37.5 0 0 1-51.375 11.625c-4.125-2.625-7.125-6.375-11.25-8.625a67.875 67.875 0 0 0-37.5-12.375 37.5 37.5 0 0 0-24 12.375 26.625 26.625 0 0 0-7.125 24l13.875 52.125a201 201 0 0 1 94.5 27.75 269.625 269.625 0 0 1 72.375 64.875 225 225 0 0 1 37.5 75A249.375 249.375 0 0 1 812 593a275.25 275.25 0 0 1-15 72 282 282 0 0 1-112.5 138 300 300 0 0 1-124.125 43.5 310.5 310.5 0 0 1-91.125 0 300 300 0 0 1-164.25-87 322.5 322.5 0 0 1-85.125-297.375 316.5 316.5 0 0 1 189.75-225 50.25 50.25 0 0 1 42 2.25A37.5 37.5 0 0 1 467 274.625a37.5 37.5 0 0 1-24 30.75 241.5 241.5 0 0 0-153.375 193.5 246 246 0 0 0 13.5 119.25 242.25 242.25 0 0 0 112.5 129.75A219.375 219.375 0 0 0 518 772.625a255.75 255.75 0 0 0 85.875-15.375 203.625 203.625 0 0 0 111-95.25 166.5 166.5 0 0 0 14.25-33.75 187.5 187.5 0 0 0 0-104.25 158.25 158.25 0 0 0-47.625-73.125A208.5 208.5 0 0 0 650 428a120.375 120.375 0 0 0-31.5-12c7.5 30 15.75 60 23.625 90.375l3.75 21.75a127.875 127.875 0 0 1-103.125 129.75 122.625 122.625 0 0 1-90-16.875 135.375 135.375 0 0 1-53.25-69 163.875 163.875 0 0 1-9-49.125 169.5 169.5 0 0 1 28.5-103.5 187.5 187.5 0 0 1 104.25-72l-9-34.875a103.5 103.5 0 0 1 5.625-75 108.375 108.375 0 0 1 27-34.125A110.25 110.25 0 0 1 587 178.625a112.5 112.5 0 0 1 58.125-0.75z" fill="#FFFFFF" p-id="2548"></path><path d="M490.25 451.625a87.75 87.75 0 0 0-22.125 42 112.5 112.5 0 0 0 0 43.5 64.875 64.875 0 0 0 24.75 40.5 47.625 47.625 0 0 0 37.5 7.125A52.5 52.5 0 0 0 572.75 536a135 135 0 0 0-3.375-17.25L543.5 420.875a119.625 119.625 0 0 0-53.25 30.75z" fill="#D81E06" p-id="2549"></path></svg>
                  </i></a>
                <a href="https://gitee.com/XiaoYoe" target="_blank"><i class="icon-gitee">
                  <svg t="1731459990816" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4998" width="200" height="200"><path d="M512 992C246.895625 992 32 777.104375 32 512S246.895625 32 512 32s480 214.895625 480 480-214.895625 480-480 480z m242.9521875-533.3278125h-272.56875a23.7121875 23.7121875 0 0 0-23.71125 23.7121875l-0.024375 59.255625c0 13.08 10.6078125 23.7121875 23.6878125 23.7121875h165.96c13.104375 0 23.7121875 10.6078125 23.7121875 23.6878125v11.855625a71.1121875 71.1121875 0 0 1-71.1121875 71.1121875h-225.215625a23.7121875 23.7121875 0 0 1-23.6878125-23.7121875V423.1278125a71.1121875 71.1121875 0 0 1 71.0878125-71.1121875h331.824375a23.7121875 23.7121875 0 0 0 23.6878125-23.71125l0.0721875-59.2565625a23.7121875 23.7121875 0 0 0-23.68875-23.7121875H423.08a177.76875 177.76875 0 0 0-177.76875 177.7921875V754.953125c0 13.1034375 10.60875 23.7121875 23.713125 23.7121875h349.63125a159.984375 159.984375 0 0 0 159.984375-159.984375V482.36a23.7121875 23.7121875 0 0 0-23.7121875-23.6878125z" fill="#C71D23" p-id="4999"></path></svg>
                  </i></a>
                <a href="https://space.bilibili.com/105125425?spm_id_from=333.1007.0.0" target="_blank"><i class="icon-bilibili">
                  <svg t="1731459860346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1482" width="200" height="200"><path d="M1019.54782609 345.3106087c-3.20556522-142.1133913-127.15408696-169.36069565-127.15408696-169.36069566s-96.70121739-0.53426087-222.25252174-1.60278261l91.3586087-88.15304347s14.42504348-18.16486957-10.15095652-38.46678261c-24.576-20.30191304-26.17878261-11.21947826-34.72695653-5.87686957-7.47965217 5.3426087-117.00313043 112.72904348-136.23652174 131.96243479-49.68626087 0-101.50956522-0.53426087-151.73008695-0.53426087h17.63060869S315.392 43.98747826 306.84382609 38.1106087s-9.61669565-14.42504348-34.72695652 5.87686956c-24.576 20.30191304-10.15095652 38.46678261-10.15095653 38.46678261l93.49565218 90.82434783c-101.50956522 0-189.12834783 0.53426087-229.73217392 2.13704347C-5.69878261 213.34817391 4.45217391 345.3106087 4.45217391 345.3106087s1.60278261 283.15826087 0 426.34017391c14.42504348 143.18191304 124.48278261 166.15513043 124.48278261 166.15513043s43.8093913 1.06852174 76.39930435 1.06852174c3.20556522 9.08243478 5.87686957 53.96034783 56.0973913 53.96034783 49.68626087 0 56.0973913-53.96034783 56.09739131-53.96034783s365.96869565-1.60278261 396.42156522-1.60278261c1.60278261 15.49356522 9.08243478 56.63165217 59.30295652 56.09739131 49.68626087-1.06852174 53.42608696-59.30295652 53.42608695-59.30295652s17.09634783-1.60278261 67.85113044 0c118.60591304-21.90469565 125.55130435-160.81252174 125.55130435-160.81252174s-2.13704348-285.82956522-0.53426087-427.94295652z m-102.04382609 453.05321739c0 22.43895652-17.6306087 40.60382609-39.53530435 40.60382608h-721.25217391c-21.90469565 0-39.53530435-18.16486957-39.53530435-40.60382608V320.20034783c0-22.43895652 17.6306087-40.60382609 39.53530435-40.60382609h721.25217391c21.90469565 0 39.53530435 18.16486957 39.53530435 40.60382609v478.16347826z" fill="#1296db" p-id="1483"></path><path d="M409.088 418.816l-203.264 38.912 17.408 76.288 201.216-38.912zM518.656 621.056c-49.664 106.496-94.208 26.112-94.208 26.112l-33.28 21.504s65.536 89.6 128 21.504c73.728 68.096 130.048-22.016 130.048-22.016l-30.208-19.456c0-0.512-52.736 75.776-100.352-27.648zM619.008 495.104l201.728 38.912 16.896-76.288-202.752-38.912z" fill="#1296db" p-id="1484"></path></svg></i> 
                </a>
                <a href="https://github.com/Xiaoyoe" target="_blank"><i class="icon-github">
                  <svg t="1731460026341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6111" width="200" height="200"><path d="M20.48 503.72608c0 214.4256 137.4208 396.73856 328.94976 463.6672 25.8048 6.5536 21.87264-11.8784 21.87264-24.33024v-85.07392c-148.93056 17.44896-154.86976-81.1008-164.94592-97.52576-20.23424-34.52928-67.91168-43.33568-53.69856-59.76064 33.91488-17.44896 68.48512 4.42368 108.46208 63.61088 28.95872 42.88512 85.44256 35.6352 114.15552 28.4672a138.8544 138.8544 0 0 1 38.0928-66.7648c-154.25536-27.60704-218.60352-121.77408-218.60352-233.79968 0-54.31296 17.94048-104.2432 53.0432-144.54784-22.36416-66.43712 2.08896-123.24864 5.3248-131.6864 63.81568-5.7344 130.00704 45.6704 135.168 49.68448 36.2496-9.78944 77.57824-14.9504 123.82208-14.9504 46.4896 0 88.064 5.3248 124.5184 15.23712 12.288-9.4208 73.80992-53.53472 133.12-48.128 3.15392 8.43776 27.0336 63.93856 6.02112 129.4336 35.59424 40.38656 53.69856 90.76736 53.69856 145.24416 0 112.18944-64.7168 206.4384-219.42272 233.71776a140.0832 140.0832 0 0 1 41.7792 99.9424v123.4944c0.86016 9.87136 0 19.6608 16.50688 19.6608 194.31424-65.49504 334.2336-249.15968 334.2336-465.5104C1002.57792 232.48896 782.66368 12.77952 511.5904 12.77952 240.18944 12.65664 20.48 232.40704 20.48 503.72608z" fill="#000000" opacity=".65" p-id="6112"></path></svg>
                  </i></a>
                <a href="https://weixin.qq.com" target="_blank"><i class="icon-weixin">
                  <svg t="1731459977531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4037" width="200" height="200"><path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="4038"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="4039"></path></svg>
                  </i></a>
              </div>
            </div>
          </div>
        </div>
        <!-- 时间卡片 -->
      <div class="time-card">
        <div class="time-card-img">
          <img src="https://pic4.zhimg.com/v2-474d4ea454b824901bff328f6be04fa1_1440w.jpg" alt="">
        </div>
      <div class="time-card-box">
        <div id="date-time">{{date}}</div>
        <div id="time-time">{{time}}</div>
      </div>
        </div>
        <!-- 公告卡片 -->
        <div class="home-notice">
          <div class="home-notice-title">
              公告
          </div>
          <div class="home-notice-box">
            <ul>
              <li v-for="item in noticeData_arr" :key="item.id" class="home-notice-li">
                {{item}}
              </li>
            </ul>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
      <!-- 回到顶部和刷新页面按钮 -->
    <div class="floating-buttons">
      <div class="scroll-to-top" @click="scrollToElement">
        <svg t="1735265082982" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5632" width="16" height="16"><path d="M565.248 39.815529l301.176471 301.176471a75.294118 75.294118 0 0 1-106.496 106.496l-167.393883-167.454118v682.767059a60.235294 60.235294 0 0 1-60.235294 60.235294h-30.117647a60.235294 60.235294 0 0 1-60.235294-60.235294V269.552941L264.071529 447.548235a75.294118 75.294118 0 0 1-100.352 5.481412l-6.144-5.481412a75.294118 75.294118 0 0 1 0-106.496l301.176471-301.17647a75.294118 75.294118 0 0 1 106.496 0z" p-id="5633" fill="#ffffff"></path></svg>
      </div>
      <div class="refresh-page" @click="refreshPage">
        <svg t="1735265164121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10064" width="16" height="16"><path d="M950.371072 532.795629l-84.398202-84.393085c-6.101975-6.096858-14.093996-9.145287-22.087041-9.143241-7.995091-0.001023-15.988136 3.047406-22.079878 9.148357l-84.519975 84.530209c-12.20088 12.195763-12.20088 31.971156 0 44.171012 6.099928 6.094812 14.09195 9.145287 22.082948 9.145287s15.993253-3.050476 22.082948-9.150404l33.171494-33.175587c-16.019859 175.330214-163.813926 313.145-343.250668 313.145-190.096523 0-344.749812-154.653289-344.749812-344.749812s154.653289-344.754928 344.749812-344.754928c92.084255 0 178.658006 35.859719 243.779166 100.975762 12.20088 12.20088 31.966039 12.20088 44.166919 0 12.20088-12.195763 12.20088-31.971156 0-44.166919-76.914764-76.91988-179.176822-119.27657-287.946085-119.27657-224.543056 0-407.217539 182.679599-407.217539 407.222655 0 224.537939 182.674483 407.217539 407.217539 407.217539 212.604142 0 387.574153-163.800623 405.591505-371.808074l29.239951 29.238928c6.099928 6.094812 14.09195 9.145287 22.082948 9.145287 7.990998 0 15.98302-3.050476 22.082948-9.150404C962.571952 564.770877 962.571952 544.995485 950.371072 532.795629z" fill="#ffffff" p-id="10065"></path><path d="M411.244248 429.099918l22.082948-22.082948c12.20088-12.195763 12.20088-31.971156 0-44.166919-12.20088-12.20088-31.966039-12.20088-44.166919 0l-22.082948 22.082948c-12.20088 12.195763-12.20088 31.971156 0 44.166919 6.099928 6.099928 14.09195 9.150404 22.082948 9.150404S405.143297 435.199847 411.244248 429.099918z" fill="#ffffff" p-id="10066"></path><path d="M565.846372 539.536146l-22.082948 22.082948c-12.20088 12.195763-12.20088 31.971156 0 44.166919 6.099928 6.099928 14.09195 9.150404 22.082948 9.150404s15.98302-3.050476 22.082948-9.150404l22.082948-22.082948c12.20088-12.195763 12.20088-31.971156 0-44.165896C597.812411 527.335267 578.047252 527.335267 565.846372 539.536146z" fill="#ffffff" p-id="10067"></path><path d="M336.453868 521.093099c-4.869914 20.679995-4.809539 63.99757 26.373671 95.175663 22.663162 22.658046 51.944046 29.03222 74.18049 29.03222 8.194636 0 15.433504-0.868787 21.025872-2.104941 16.694217-3.691065 27.115568-20.070104 23.638373-36.810371-3.477194-16.730033-19.968797-27.578102-36.754089-24.258497-0.25378 0.035816-23.5166 4.376681-37.923728-10.030447-14.010085-14.020318-9.953699-35.539424-9.658987-37.003775 3.741207-16.673751-6.639211-33.302477-23.312962-37.231973C357.26587 493.89055 340.408947 504.296551 336.453868 521.093099z" fill="#ffffff" p-id="10068"></path></svg>
      </div>
    </div>
  </div>

</template>

<style scoped lang="less">
@import '@/assets/less/home.less';
</style>
